<template id="friendRankHelp">
    <!--好友助力榜 ： 弹框-->
    <div class="friend-help clearfix">
        <div class="back-bord" @click="closeAlert"></div>
        <div id="pFriendHelp" class="prize-check-more-alert js_hide">
            <div id="checkMore" class="alert-wrap">
                <div class="prize-step-resore-wrap">
                    <!--<img class="prize-step-resore" :src="staticImageUrl('images/sort_title.png')" alt=""/>-->
                    <img class="prize-step-resore" :src="staticImageUrl('images/call_ranking_img.png')" alt="">
                    <span class="prize-step-resore-title">好友助力榜</span>
                </div>
                <ul class="ranking-list-wrap">
                    <li class="ranking-list" v-for="member in newMembers">
                        <span class="ranking-list-msg">
                            <img v-if="member.photo" class="ranking_user_touxiang ranking-user-photo ranking-teamer-img"
                                 v-lazy="member.photo" alt=""/>
                            <span class="ranking-username">{{member.name | nameFilter}}</span>
                        </span>
                        <span class="ranking-get-discount">成功打call￥{{member.cutMoney}}</span>
                    </li>
                    <li v-if="helpHandAlertHasMore" class="pa-more" @click="$emit('nextPage');">
                        查看更多<span class='iconfont icon-youjiantou1'></span>
                    </li>
                </ul>
                <img class="rpfr-close-btn" @click="$emit('close-friend-alert')" :src="staticImageUrl('images/close_icon_border.png')" alt="">
            </div>
        </div>
        <v-bord>
            <div slot="cantClick"  @click="$emit('close-friend-alert')" class="com_black"></div>
        </v-bord>
    </div>
</template>
<script>

    import  $ from 'jquery'
    import  {formatDate}  from '../../../../../../../static/js/common'

    export default {
        name: 'friendRankHelp',
        props: ['newMembers','helpHandAlertHasMore'],
        data() {
            return {
                members: [],
            }
        },
        filters: {
            nameFilter: function (name) {
                var showName = "";
                if (name != null && name != "") {
                    showName = (name.length <= 2) ? name : name.substr(0, 2).concat("***");
                }
                return showName
            },
            timeFilter: function (time) {
                let date = new Date(time);
                return formatDate(date,"yyyy-MM-dd hh:mm");
            }
        },
        components:{
            'v-bord':()=>import('../../../../../commonComponents/alert/Bord')
        },
        methods: {
            closeAlert: function() {
                this.$emit('close-friend-alert');
            }
        }
    }

</script>
<style scoped lang="scss">
    @import url($css_root + 'css/components/sortAlert.css');
    .prize-check-more-alert {
        .prize-step-resore{
            position: relative;
            display: block;
            left: 0;
            width: 1.61rem;
            right: 0;
            margin: auto;
        }
        .prize-step-resore-title{
            top: 60%;
        }
        .alert-wrap {
            max-height: 4.8rem;
            border-radius: 10px;
            width: 90%;
        }
        .prize-step-resore-wrap{
            width: 100%;
            top: -.55rem;
        }
    }
    .pa-more{
        color: #F05656;
        font-size: .12rem;
        .icon-youjiantou1{
            color: #F05656;
        }
    }
    .ranking-list-wrap{
        padding-bottom: .5rem;
    }
</style>